<template>
	<view class="detailed">
		<view class="search">
			<u-search
				v-model="searchValue"
				height="80"
				input-align="center"
				border-color="#c8c7cc"
				bg-color="#fff"
				:clearabled="true"
				shape="round"
				placeholder="请输入关键字(备注/类型/时间)"
				:show-action="false"
				@search="confirmSearch"
				@clear="cancelSearch"
			></u-search>
		</view>

		<u-cell-group>
			<u-cell-item title="日期" :arrow="false">
				<picker slot="right-icon" mode="date" :value="date" fields="day" @change="dateChange" @cancel="dateCancel">
					<view class="picker">{{ date }}</view>
				</picker>
			</u-cell-item>
		</u-cell-group>

		<u-swipe-action :index="index" v-for="(item, index) in datas" :key="index" @click="onClick" :options="options">
			<view class="listItem">
				<view class="item">
					<text class="type">{{ item.type }}</text>
					<text class="money" :style="{ color: item.mark == 'expenditure' ? 'red' : 'green' }">￥{{ item.money }}</text>
					<text class="date">{{ item.date }}</text>
				</view>
				<view class="remarks">备注：{{ item.remarks || '无' }}</view>
			</view>
		</u-swipe-action>

		<!-- 底部加载 -->
		<u-loadmore :status="loadMoreStatus" :load-text="contentText" margin-top="40" margin-bottom="40" />

		<!-- 更新账单数据弹窗 -->
		<u-modal v-model="updataDialog" title="修改数据" :show-cancel-button="true" @confirm="updataItem">
			<view class="dialog">
				<u-form-item label="金额"><u-input placeholder="金额大小" type="number" v-model="updataData.money" /></u-form-item>
				<u-form-item label="备注"><u-input type="textarea" maxlength="1000" placeholder="备注文字" v-model="updataData.remarks" /></u-form-item>
			</view>
		</u-modal>
	</view>
</template>

<script>
import { money_search, money_del, money_updata } from '@/api/api.js';
export default {
	data() {
		return {
			date: '未选择',
			searchValue: '',
			datas: [],
			pageNumber: 1, //页码
			pageSize: 10, //加载数量
			// 更新弹窗
			updataDialog: false,
			updataData: {
				money: '',
				remarks: '',
				_id: ''
			},
			// 滑块
			options: [
				{
					text: '修改',
					style: {
						backgroundColor: '#007dd5'
					}
				},
				{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}
			],
			loadMoreStatus: 'loading', //上拉加载状态，loading加载中，noMore没有更多
			contentText: {
				loadmore: '轻轻上拉',
				loading: '努力加载中',
				nomore: '实在没有了'
			}
		};
	},
	onShow() {
		this.date = '未选择';
		this.resetDataList();
	},
	onReachBottom() {
		//加载更多
		if (this.loadMoreStatus === 'loading') {
			this.pageNumber++;
			this.search();
		}
	},
	methods: {
		dateChange(event) {
			this.date = event.detail.value;
			this.resetDataList();
		},
		dateCancel() {
			this.date = '未选择';
			this.resetDataList();
		},
		resetDataList() {
			this.pageNumber = 1;
			this.datas = [];
			this.search();
		},
		cancelSearch() {
			this.dateCancel();
		},
		confirmSearch() {
			this.dateCancel();
		},
		search() {
			this.loadMoreStatus = 'loading';

			let sendData = {
				pageNumber: this.pageNumber,
				pageSize: this.pageSize,
				value: this.searchValue
			};

			if (this.date !== '未选择') {
				sendData.date = this.date;
			}

			money_search(sendData).then(res => {
				this.datas = this.datas.concat(res.data);
				//全部
				if (res.data.length < this.pageSize) {
					this.loadMoreStatus = 'noMore'; //noMore没有更多
				}
			});
		},
		onClick(index, clickBtn) {
			let item = this.datas[index];
			switch (clickBtn) {
				case 0: //修改
					this.updataData._id = item._id;
					this.updataData.money = item.money;
					this.updataData.remarks = item.remarks;
					this.updataDialog = true;

					break;
				case 1: //删除
					uni.showLoading({
						title: '加载中...',
						mask: true
					});
					money_del(item).then(res => {
						uni.hideLoading();
						this.$utils.showToast('删除成功');
						this.resetDataList();
					});
					break;
			}
		},
		updataItem() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			money_updata(this.updataData).then(res => {
				uni.hideLoading();
				this.$utils.showToast('更新成功');
				this.resetDataList();
			});
			this.updataDialog = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.detailed {
	.search {
		padding: 20rpx;
		background-color: #fff;
	}

	.listItem {
		border-bottom: 2rpx solid #e4e7ed;
		width: 750rpx;
		padding: 30rpx;

		.item {
			display: flex;
			align-items: center;

			.type {
				flex: 1;
			}

			.money {
				flex: 1;
			}

			.date {
				flex: 1;
			}
		}

		.remarks {
			margin-top: 20rpx;
			word-break: break-all;
		}
	}

	.dialog {
		padding: 20rpx;
	}
}
</style>
